﻿<template>
  <div class="kerryplususercoupon-container">
    <el-dialog
      v-model="isShowDialog"
      :width="800"
      draggable=""
      :close-on-click-modal="false"
    >
      <template #header>
        <div style="color: #fff">
          <!--<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>-->
          <span>{{ props.title }}</span>
        </div>
      </template>
      <el-form :model="ruleForm" ref="ruleFormRef" label-width="auto" :rules="rules">
        <el-row :gutter="35">
          <el-form-item v-show="false">
            <el-input v-model="ruleForm.id" />
          </el-form-item>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="用户ID" prop="userId">
              <el-input
                v-model="ruleForm.userId"
                placeholder="请输入用户ID"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="手机号" prop="phoneNumber">
              <el-input
                v-model="ruleForm.phoneNumber"
                placeholder="请输入手机号"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="优惠券ID" prop="couponId">
              <el-input
                v-model="ruleForm.couponId"
                placeholder="请输入优惠券ID"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="优惠券名称" prop="couponName">
              <el-input
                v-model="ruleForm.couponName"
                placeholder="请输入优惠券名称"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="优惠券Code" prop="couponCode">
              <el-input
                v-model="ruleForm.couponCode"
                placeholder="请输入优惠券Code"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="优惠券状态" prop="couponState">
              <el-input
                v-model="ruleForm.couponState"
                placeholder="请输入优惠券状态"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="生效日期" prop="exchangeDate">
              <el-date-picker
                v-model="ruleForm.exchangeDate"
                type="date"
                placeholder="生效日期"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="分类" prop="category">
              <el-input-number
                v-model="ruleForm.category"
                placeholder="请输入分类"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="优惠券类型" prop="couponType">
              <el-input
                v-model="ruleForm.couponType"
                placeholder="请输入优惠券类型"
                maxlength="200"
                show-word-limit
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="创建时间" prop="createDate">
              <el-date-picker
                v-model="ruleForm.createDate"
                type="date"
                placeholder="创建时间"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="有效期开始" prop="exchangeStartDate">
              <el-date-picker
                v-model="ruleForm.exchangeStartDate"
                type="date"
                placeholder="有效期开始"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
            <el-form-item label="有效期结束" prop="exchangeEndDate">
              <el-date-picker
                v-model="ruleForm.exchangeEndDate"
                type="date"
                placeholder="有效期结束"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>
:deep(.el-select),
:deep(.el-input-number) {
  width: 100%;
}
</style>
<script lang="ts" setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import type { FormRules } from "element-plus";
import { formatDate } from "/@/utils/formatTime";
import {
  addKerryplususercoupon,
  updateKerryplususercoupon,
  detailKerryplususercoupon,
} from "/@/api/kerryplus/kerryplususercoupon";

//父级传递来的参数
var props = defineProps({
  title: {
    type: String,
    default: "",
  },
});
//父级传递来的函数，用于回调
const emit = defineEmits(["reloadTable"]);
const ruleFormRef = ref();
const isShowDialog = ref(false);
const ruleForm = ref<any>({});
//自行添加其他规则
const rules = ref<FormRules>({
  exchangeDate: [{ required: true, message: "请选择生效日期！", trigger: "change" }],
  category: [{ required: true, message: "请输入分类！", trigger: "blur" }],
  createDate: [{ required: true, message: "请选择创建时间！", trigger: "change" }],
  exchangeStartDate: [
    { required: true, message: "请选择有效期开始！", trigger: "change" },
  ],
  exchangeEndDate: [{ required: true, message: "请选择有效期结束！", trigger: "change" }],
});

// 页面加载时
onMounted(() => {});

// 打开弹窗
const openDialog = async (row: any) => {
  // ruleForm.value = JSON.parse(JSON.stringify(row));
  // 改用detail获取最新数据来编辑
  let rowData = JSON.parse(JSON.stringify(row));
  if (rowData.id)
    ruleForm.value = (await detailKerryplususercoupon(rowData.id)).data.result;
  else ruleForm.value = rowData;
  isShowDialog.value = true;
};

// 关闭弹窗
const closeDialog = () => {
  emit("reloadTable");
  isShowDialog.value = false;
};

// 取消
const cancel = () => {
  isShowDialog.value = false;
};

// 提交
const submit = async () => {
  ruleFormRef.value.validate(async (isValid: boolean, fields?: any) => {
    if (isValid) {
      let values = ruleForm.value;
      if (
        ruleForm.value.id == undefined ||
        ruleForm.value.id == null ||
        ruleForm.value.id == "" ||
        ruleForm.value.id == 0
      ) {
        await addKerryplususercoupon(values);
      } else {
        await updateKerryplususercoupon(values);
      }
      closeDialog();
    } else {
      ElMessage({
        message: `表单有${Object.keys(fields).length}处验证失败，请修改后再提交`,
        type: "error",
      });
    }
  });
};

//将属性或者函数暴露给父组件
defineExpose({ openDialog });
</script>
